<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/teacher.css">
    <script src="../js/jquery.js"></script>
</head>
<body>
<div class="container">
    <h1>教师信息管理</h1>
    <form class="search-form">
        <input type="text" id="teacherName" name="teacherName" placeholder="请输入教师姓名" />
        <button type="button" class="button" onclick="searchTeacher()">查询</button>
        <a href="add_teacher.html" class="button">新增教师</a>
    </form>
    <table class="teacher-table">
        <thead>
        <tr>
            <th>教师ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>联系电话</th>
            <th>地址</th>
            <th>是否党员</th>
            <th>职位</th>
            <th>部门ID</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="teacherTableBody">
        <!-- 动态加载数据 -->
        </tbody>
    </table>
</div>
<script>
    $(document).ready(function () {
        // 页面加载时，获取教师数据
        loadTeachers();
        // 查询教师
        window.searchTeacher = function () {
            const teacherName = $("#teacherName").val();
            const telPhone = $("#telPhone").val(); // 假设页面中有输入框用于填写电话
            const params = {
                "teacherName": teacherName,
                "telPhone": telPhone
            };
            loadTeachers(params);
        };

// 动态加载教师数据
        function loadTeachers(params) {
            $.ajax({
                url: "/queryTeacher",
                method: "GET",
                contentType: "application/json", // 设置请求内容类型为 JSON
                data: JSON.stringify(params),    // 将 params 对象转为 JSON 格式
                success: function (res) {
                    renderTable(res);
                },
                error: function () {
                    alert("加载数据失败，请检查服务端是否启动。");
                }
            });
        }


        // 渲染表格
        function renderTable(data) {
            const tbody = $("#teacherTableBody");
            tbody.empty(); // 清空表格内容

            if (data.length === 0) {
                tbody.append("<tr><td colspan='9'>没有数据</td></tr>");
                return;
            }

            data.forEach(item => {
                const row = `
                        <tr>
                            <td>${item.teacherid}</td>
                            <td>${item.name}</td>
                            <td>${item.gender === "F" ? "女" : "男"}</td>
                            <td>${item.phone}</td>
                            <td>${item.address}</td>
                            <td>${item.partymember ? "是" : "否"}</td>
                            <td>${item.position}</td>
                            <td>${item.departmentid}</td>
                            <td>
                                <a href="edit_teacher.html?id=${item.teacherid}" class="button">修改</a>
                                <button class="delete-btn" onclick="deleteTeacher(${item.teacherid})">删除</button>
                            </td>
                        </tr>`;
                tbody.append(row);
            });
        }

        // 删除教师
        window.deleteTeacher = function (teacherId) {
            if (confirm("删除该教师信息吗？")) {
                $.ajax({
                    url: `/deleteTeacherById`,
                    method: "POST",
                    data: { tId: teacherId },
                    success: function (res) {
                            alert("删除成功！");
                            loadTeachers();
                    },
                    error: function () {
                        alert("删除操作失败！");
                    }
                });
            }
        };
    });
</script>
</body>
</html>
